<template>
  <div class="el-main">
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="2" align="left">
            <el-button  type="primary" @click="toAdd">
              <i class="el-icon-circle-plus-outline"></i>
              发布
            </el-button>
          </el-col>
          <el-col :span="3" :offset="19"  >
            <el-select clearable v-model="pageable.type">
              <template v-for="item in options">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </template>
            </el-select>

          </el-col>
          <!--    <el-col :span="3">
                <el-input placeholder="输入标准名称" v-model="name" v-on:click="findByParam"></el-input>

              </el-col>
              <el-col :span="1" align="right">
                <el-button type="primary" v-on:click="findByParam">查询</el-button>
              </el-col>-->
        </el-row>
        <el-row style="padding-top: 10px">
          <el-table class="el-tab" :data="tableData" border size="mini" style="font-size: 13px"
                    :cell-style="{height:'34px',padding:'0px'}"
                    :header-cell-style="{background:'#f5f6fa',fontWeight:'normal'}">
            <!--    <el-table-column prop="id" label="id" align="center">
                </el-table-column>-->
            <el-table-column type="index" min-width="10" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="title" min-width="150" label="标题"  align="center">
            </el-table-column>
            <el-table-column prop="type" min-width="40" label="所属栏目" :formatter="typeFormat"  align="center">
            </el-table-column>
            <el-table-column prop="createdBy" min-width="40" label="发布人"  align="center">
            </el-table-column>
            <el-table-column prop="createdDate" min-width="60" label="创建时间" :formatter="dateFormat" align="center">
            </el-table-column>
            <el-table-column prop="status" min-width="40" label="状态" :formatter="statusFormat" align="center">
            </el-table-column>
            <!--  <el-table-column prop="createdDate" label="发布时间" :formatter="dateFormat" align="center">
              </el-table-column>-->
            <el-table-column min-width="50"
              fixed="right"
              label="操作"
              width="200" align="center" >
              <template slot-scope="scope" >
                <el-button @click.native.prevent="examine(scope.row)" type="text" size="small" v-has="['ROLE_ADMIN']"
                           v-if="scope.row.status == '0'">审核
                </el-button>
                <el-button @click.native.prevent="toTop(scope.row)" type="text" size="small" v-has="['ROLE_ADMIN']"
                           v-if="scope.row.status == '1'">置顶
                </el-button>
                <el-button @click.native.prevent="edit(scope.row)" type="text" size="small"  >
                  <template v-if="scope.row.status!==1">
                    编辑
                  </template>
                  <template v-else>
                    查看
                  </template>
                </el-button>
                <el-button @click.native.prevent="deleteRow(scope.row.id)" type="text" size="small" v-has="['ROLE_ADMIN']">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-pagination align="right" style="margin-top: 5px;" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :current-page="pageable.page+1"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageable.size" layout="total, sizes, prev, pager, next, jumper"
                       :total="totalElements">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import Qs from 'qs';
  import moment from 'moment'
  import {MessageBox, Message} from 'element-ui';
  import {mapGetters} from "vuex";
  import {typeFormat} from "@/utils/formatUtils";

  export default {

    name: "NewsRelease",
    data() {
      return {
        type: '11',
        tableData: [],
        totalElements: 0,
        content: '',
        options: [{
          value: '',
          label: '未审核'
        },{
          value: '11',
          label: '通知公告'
        }, {
          value: '12',
          label: '媒体聚焦'
        }, {
          value: '13',
          label: '信息公开'
        }, {
          value: '14',
          label: '廉政监督'
        }],
        pageable: {
          type:"",
          page: 0,
          size: 10,
          sort: 'orderField,desc',
        }
      }
    },
    computed: {
      ...mapGetters([
        'roles'
      ])
    },
    created() {
      this.findByParam()
    },
    watch: {
      'pageable.page': function (val) {
        this.findByParam()
      },
      'pageable.size': function (val) {
        this.findByParam()
      },
      'pageable.type': function (val) {
        this.findByParam()
      }
    },

    methods: {
      typeFormat,
      handleSizeChange(val) {
        this.pageable.size = val;
      },

      handleCurrentChange(val) {
        this.pageable.page = val - 1;
      },

      findByParam() {
        let that = this;
        let data = Qs.stringify(this.pageable)
        this.instance.post('/w/announcements/s', data)
          .then(function (response) {
            that.totalElements = response.pageable.totalElements;
            that.tableData = response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },


      deleteRow(id) {
        let that = this;
        let confirm = MessageBox.confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.instance.delete('/w/announcements/' + id).then(function (response) {
            Message.success("删除成功")
            that.findByParam()
          })
        }).catch(() => {
          Message.info("取消删除")
        })
      },
      handleClick(row) {

      },
      edit(row) {
        this.$router.push({name: 'announcementAdd', query: {id: row.id}}) // 只能用 name
      },
      examine(row) {
        this.$router.push({name: 'announcementExamine', query: {id: row.id}}) // 只能用 name
      },
      toAdd() {
        this.$router.push({name: 'announcementAdd'}) // 只能用 name
      },
      toTop(row){
        let that=this;
        that.instance.put('/w/announcements/roofPlacement/'+row.id)
          .then(function (response) {
            that.findByParam()
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      dateFormat: function (row, column) {
        let date = row[column.property];
        if (date === undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      statusFormat:function (row, column) {
        let status = row.status;
        switch (status){
          case 0:
            status = '未审核';
            break;
          case 1:
            status = '审核通过';
            break;
          case 2:
            status = '审核未通过';
            break;
        }
        return status
      }
    }
  }
  ;
</script>


<style scoped>

</style>
